<template>
  <div class="form-check-config-empty">
    <div class="form-check-config-button-wrapper">
      <a-button type="primary" shape="round" icon="plus" @click="openFormCheckConfigModal"
                style="height: 50px; width: 250px; box-shadow: 0 0 22px #40a9ff63;">
        点击创建规则组
      </a-button>
      <FormCheckConfigModal @ok="handleOK" :formDefinition="formDefinition" ref="FormCheckConfigModal"/>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import FormCheckConfigModal from '@comp/hhd/design/FormDesigner/form/check/FormCheckConfigModal.vue';

export default {
  name: 'FormCheckEmptyConfig',
  components: {FormCheckConfigModal},
  props: {
    dataSource: createProps(Array),
    formDefinition: createProps(Object, createFormDefinition),
  },
  methods: {
    openFormCheckConfigModal() {
      this.$refs.FormCheckConfigModal.setData();
    },
    handleOK(group) {
      let index = this.dataSource.findIndex(item => item.id === group.id)
      if (index === -1) {
        if(!this.formDefinition.formCheckGroups) this.formDefinition.formCheckGroups = []
        this.formDefinition.formCheckGroups.push(group)
      }
    }
  }
};
</script>
<style>
.form-check-config-empty {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
</style>